<template>
  <yq-dialog
    v-model="visible"
    width="70%"
    top="5vh"
    title="产品动态"
    :show-confirm-cancel-button="false"
    :before-close="() => {handleBefore()}"
    @open="handleOpen"
  >
    <div class="munu_box">
      <el-card
        class="carton_card"
        style="width:30%"
        shadow="never"
      >
        <el-row>
          <el-col
            :span="24"
            style="height: 400px;"
          >
            <div
              v-for="notification in list"
              :key="notification.id"
              class="notification-item"
            >
              <el-link
                :underline="false"
                @click="viewNotification(notification.noticeId)"
              >
                <span style="font-size: 14px;color:#1571FA">【通告】</span>
                <span style="font-size: 14px;color: rgb(132 133 136);">{{ notification.title }}</span>
              </el-link>
              <span style="font-size: 14px; color: #aeb0b4;">{{ notification.createDate }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="reportForm_card"
        style="width:70%;"
        shadow="never"
      >
        <el-row>
          <el-col
            :span="24"
            style="height: 400px;"
          >
            <div
              v-for="(item,index) in noticeList"
              :key="index"
            >
              <div
                class="content"
                v-html="item.content"
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </yq-dialog>
</template>

<script>
import SystemConfigAPI from '@/api/system-config'
// import { assignOnTarget } from '@/utils/common'
import { mapState } from 'vuex'
export default {
  name: 'CartonProductDynamic',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: undefined
    },
    list: {
      type: Array,
      default: undefined
    }
  },
  data() {
    return {
      confirmButtonLoading: false,
      noticeList: []
    }
  },
  computed: {
    ...mapState('app', {
      tableHeight: state => state.height.clientHeight - 150
    })
  },
  methods: {
    initData() {
      console.log(this.id);
      SystemConfigAPI.getList('noticeDetail', { noticeId: this.id }).then(res => {
        if (res.code === 200) {
          this.noticeList = res.data.pageItems
        }
      })
    },
    async viewNotification(noticeId) {
      const res = await SystemConfigAPI.getList('noticeDetail', { noticeId })
      if (res.code === 200) {
        this.noticeList = res.data.pageItems
      }
    },
    handleBefore() {
      this.$emit('add-data')
      this.setVisible(false)
    },
    handleOpen() {
      this.initData()
    },
    setVisible(flag) {
      this.$emit('update:visible', flag)
    }
  }
}
</script>

<style lang="scss" scoped>
.munu_box {
  display: flex;
}
.notification-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.carton_card {
  overflow-y: auto; /* 开启滚动显示溢出内容 */
}
.reportForm_card {
  overflow-y: auto; /* 开启滚动显示溢出内容 */
}
/deep/ .el-dialog__body {
  padding-left: 15px;
}
/deep/ .el-form-item__label {
  text-align: left;
}
/deep/ .el-input {
  width: 350px;
}
/deep/ .search-date-picker {
  width: 350px !important;
}
/deep/ .mini-form .el-form-item__label {
  font-size: 14px;
}
</style>
